<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script src="__PUBLIC__/static/jquery-2.0.3.min.js"></script>


    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <!--<script type="text/ecmascript" src="../../../js/jquery.min.js"></script>-->
    <!-- This is the Javascript file of jqGrid -->
    <script type="text/ecmascript" src="__PUBLIC__/static/jqGrid-master/js/minified/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="__PUBLIC__/static/jqGrid-master/js/minified/i18n/grid.locale-en.js"></script>
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="__PUBLIC__/static/jquery-ui/jquery-ui.css" />
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="__PUBLIC__/static/jqGrid-master/css/ui.jqgrid.css" />
    <meta charset="utf-8" />

    <style>
        body{ text-align:center}
        .div{ margin:0 auto; width:400px; height:100px; border:0px solid #000}
        /* css注释：为了观察效果设置宽度 边框 高度等样式 */
    </style>
</head>
<body>
    <h1>详细信息表格 {$menuCate} </h1>


    <div class="div">
    <table id="jqGrid"></table>
    </div>
    <div id="jqGridPager"></div>
    <script type="text/javascript">


        $(document).ready(function () {

            $("#jqGrid").jqGrid({
                url: 'Home/Index/getJson',
                datatype: "json",
                colModel: [
                    { label: 'Category Name', name: 'CategoryName', width: 75 },
                    { label: 'Product Name', name: 'ProductName', width: 90 },
                    { label: 'Country', name: 'Country', width: 100 },
                    { label: 'Price', name: 'Price', width: 80, sorttype: 'integer' },
                    // sorttype is used only if the data is loaded locally or loadonce is set to true
                    { label: 'Quantity', name: 'Quantity', width: 80, sorttype: 'number' }
                ],
                viewrecords: true, // show the current page, data rang and total records on the toolbar
                width: 780,
                height: 200,
                rowNum: 30,
                loadonce: true, // this is just for the demo
                pager: "#jqGridPager"
            });
        });

    </script>

</body>
</html>